<template>
    <div class="netdisk-files">
        <!-- 左侧按钮组, 右侧搜索框-->
        <div class="files-buttons-row">
            <div class="files-button-group">
                <el-upload v-if="selectedFiles.length == 0" class="files-button-item files-button-create" multiple
                    :http-request="handleUploadFile" 
                    :auto-upload="true"
                    :show-file-list="false">
                    <img src="@/assets/image/netdisk/创建文件夹2.svg" alt="上传">
                    <span>上传</span>
                </el-upload>
                <div v-if="selectedFiles.length ==0" class="files-button-item files-button-create" @click="handleCreateFolder">
                    <img src="@/assets/image/netdisk/创建文件夹2.svg" alt="创建文件夹">
                    <span>创建文件夹</span>
                </div>
                <div v-if="selectedFiles.length > 0" class="files-button-item" @click="handleMove">
                    <img src="@/assets/image/netdisk/移动至.svg" alt="">
                    <span>移动至</span>
                </div>
                <div v-if="selectedFiles.length > 0" class="files-button-item" @click="handleDownload">
                    <img src="@/assets/image/netdisk/下载.svg" alt="下载">
                    <span>下载</span>
                </div>
                <div v-if="selectedFiles.length > 0" class="files-button-item" @click="handleShare">
                    <img src="@/assets/image/netdisk/分享.svg" alt="分享">
                    <span>分享</span>
                </div>
                <div v-if="selectedFiles.length > 0" class="files-button-item" @click="handleDelete">
                    <img src="@/assets/image/netdisk/取消收藏.svg" alt="删除">
                    <span>删除</span>
                </div>
            </div>

            <div class="files-search-container">
                <el-autocomplete v-model="searchKeyword" :fetch-suggestions="searchSuggestions" clearable
                    placeholder="请输入文件名搜索" class="files-search-input" @select="handleSearchSelect"
                    @keyup.enter="handleSearch" :trigger-on-focus="true">
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="{ item }">
                        <div class="search-suggest-item">
                            <el-icon>
                                <Clock />
                            </el-icon>
                            <span>{{ item.value }}</span>
                        </div>
                    </template>
                </el-autocomplete>
            </div>
        </div>
        <!-- 左侧面包屑，右侧视图切换 -->
        <div class="files-nav-row">
            <div class="files-breadcrumb-container">
                <el-icon class="breadcrumb-icon"> 
                      <HomeFilled />
                </el-icon>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="(item, index) in pathBreadcrumb" :key="index"  @click="handleBreadcrumbClick(item.fileId)">{{ item.fileName }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="files-view-controls">
                <span class="selected-count" v-if="selectedFiles.length > 0">已选中<span>{{ selectedFiles.length
                        }}</span>个文件/文件夹</span>
                <span class="selected-count" v-else>已全部加载，共<span>{{ fileList.length }}</span>个</span>
                <div class="files-view-switch">
                    <div class="files-grid-view" :class="{ active: viewMode == 'grid' }" @click="switchView('grid')">
                        <el-icon>
                            <Grid />
                        </el-icon>
                    </div>
                    <div class="files-list-view" :class="{ active: viewMode == 'list' }" @click="switchView('list')">
                        <el-icon>
                            <Menu />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>

        <!-- 全选按钮 -->
        <div class="files-check-row" v-if="viewMode == 'grid'">
            <div class="files-check-box">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                    @change="handleCheckAllChange">全选</el-checkbox>
            </div>
        </div>

        <div class="files-content">
            <el-checkbox-group v-if="viewMode == 'grid'" v-model="selectedFiles" @change="handleCheckedChange">
                <!-- 方格模式 -->
                <div class="files-content-grid">
                    <!-- 新增：创建文件夹输入框 -->
                    <div class="files-grid-item files-grid-item-create" v-if="isCreatingNewFolder">
                        <div class="item-cover">
                            <img class="item-cover-img" src="@/assets/image/netdisk/folder.svg" alt="新建文件夹">
                        </div>
                        <div class="item-info">
                            <el-input v-model="newFolderName" @blur="saveNewFolder" @keyup.enter="saveNewFolder" @keyup.escape="cancelNewFolder">
                            </el-input>
                        </div>
                    </div>
                    <div class="files-grid-item" :class="{ 'checked': selectedFiles.includes(item) }" v-for="(item, index) in fileList" :key="index" @click="handleFileClick(item)" @contextmenu.prevent="showContextMenu($event, item)">
                        <el-checkbox class="item-checkbox" :label="item" :value="item">{{ }}</el-checkbox>
                        <div class="files-grid-item-content">
                            <div class="item-cover">
                                <!-- 根据文件类型显示不同图标 -->
                                <FileTypeIcon :fileType="item.fileType" />
                            </div>
                            <div class="item-info">
                                <span v-if="editingFileId != item.fileId">{{ item.fileName }}</span>
                                <el-input v-else v-model="editingFileName" @blur="handleRenameFile(item)" @keyup.enter="handleRenameFile(item)" @keyup.escape="cancleRenameFile(item)"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
            </el-checkbox-group>
            <div class="files-content-table" v-if="viewMode == 'list'">
                <el-table ref="multipleTable" :data="fileList" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="fileName" label="文件名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="" width="200">
                        <template #default="scope">
                            <div class="files-action-btns">
                                <span @click="handleDownload(scope.row)">
                                    <img src="@/assets/image/netdisk/下载.svg" alt="下载">
                                </span>
                                <span @click="handleShare(scope.row)">
                                    <img src="@/assets/image/netdisk/分享.svg" alt="分享">
                                </span>
                                <span @click="handleMove(scope.row)">
                                    <img src="@/assets/image/netdisk/移动至.svg" alt="移动至">
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fileSize" label="文件大小" width="180"></el-table-column>
                    <el-table-column prop="fileType" label="文件类型" width="180"></el-table-column>
                    <el-table-column prop="createTime" label="收藏时间" width="180"></el-table-column>
                </el-table>
            </div>
            <!-- 右键菜单 -->
            <div class="files-context-menu" v-show="showMenu" :style="menuPosition">
                <span class="files-menu-item" @click="handleDownload(contextMenuItem)">下载</span>
                <span class="files-menu-item" @click="handleShare(contextMenuItem)">分享</span>
                <span class="files-menu-item" @click="handleRename(contextMenuItem)">重命名</span>
                <span class="files-menu-item" @click="handleMove(contextMenuItem)">移动至</span>
                <span class="files-menu-item" @click="handleDetail(contextMenuItem)">详细信息</span>
                <span class="files-menu-item" @click="handleDelete(contextMenuItem)">删除</span>
            </div>
        </div>

        <!-- 文件预览 -->
        <FilePreview v-model="previewVisible" :fileInfo="previewFileInfo"/>
        <!-- 详细信息 -->
        <FileDetail v-model="detailVisible" :fileInfo="detailFileInfo"/>

        <!-- 移动到文件夹弹窗 -->
        <FileMove v-model="moveDialogVisible" :moving-items="movingItems" @confirm="handleMoveFile" />
    </div>
</template>

<script setup>
// ==================== 引入部分 ====================
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
// 获取路由地址参数
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Grid, Menu, HomeFilled, Search, Clock } from '@element-plus/icons-vue';
import { uploadFile, pageFileList, createFolder,renameFile, deleteFile,previewFile, downloadFile } from '@/api/netdisk/file'
import { listFileAndFolder } from '@/api/netdisk/common'
import { listNetdiskFolder, createNetdiskFolder, updateNetdiskFolder, deleteNetdiskFolder } from '@/api/netdisk/folder'
// import FileMove from '~/components/FileMove.vue';
// import FilePreview from '@/components/FilePreview/index.vue';
// ==================== 状态定义 ====================
// 初始化文件管理器相关
const fileType = ref("image");
const route = useRoute();
// 视图相关
const viewMode = ref('grid'); // 视图模式：grid/list

// 路径相关
const pathBreadcrumb = ref([{
        fileName: '全部文件',
        fileId: 0
    }]); // 面包屑导航
const currentFileId = ref(0); // 当前目录ID

// 文件列表相关
const fileList = ref([]); // 文件和文件夹列表

// 选择相关
const checkAll = ref(false);
const isIndeterminate = ref(false);
const selectedFiles = ref([]);

// 搜索相关
const searchKeyword = ref('');
const searchHistory = ref([]);

// 右键菜单相关
const showMenu = ref(false);
const menuPosition = ref({});
const contextMenuItem = ref(null);

// 重命名相关
const editingFileId = ref(null);
const editingFileName = ref('');

// 移动相关
const moveDialogVisible = ref(false);
const movingItems = ref([]);
const multipleTable = ref(null);

// 创建文件夹相关
const isCreatingNewFolder = ref(false);
const newFolderName = ref('');

// 预览相关
const previewVisible = ref(false);
const previewFileInfo = ref({});

// 详细信息相关
const detailVisible = ref(false);
const detailFileInfo = ref({});
// ==================== 生命周期钩子 ====================
onMounted(() => {
    initFileExplorer();
});

onBeforeUnmount(() => {
    // 组件销毁前移除事件监听
    document.removeEventListener('click', closeContextMenu);
});
// ==================== 初始化 ====================
// 初始化资源管理器
const initFileExplorer = () => {
    console.log("fileType.value", fileType.value);
    fileType.value = route.query.fileType || "";
    if(fileType.value){
        pathBreadcrumb.value=[{ fileId: 0}];
        switch (fileType.value) {
            case 'image':
                pathBreadcrumb.value[0].fileName = "图片文件";
                break;
            case 'audio':
                pathBreadcrumb.value[0].fileName = "音频文件";
                break;
            case 'video':
                pathBreadcrumb.value[0].fileName = "视频文件";
                break;
            case 'pdf':
                pathBreadcrumb.value[0].fileName = "PDF文件";
                break;
            case 'doc':
                pathBreadcrumb.value[0].fileName = "文档文件";
                break;
            default:
                pathBreadcrumb.value[0].fileName = "其他文件";
                break;
        }
        getFileList();
    }else{  
        pathBreadcrumb.value[0].fileName = "全部文件";
        getFileList( currentFileId.value);
    }
}

// ==================== 监听器 ====================
// 视图模式变化时清空选择
watch(viewMode, (newVal) => {
    selectedFiles.value = [];
});
watch(() => route.query.fileType, (newVal, oldVal) => {
    initFileExplorer();
});

// ==================== 文件列表操作 ====================
// 获取文件列表
const getFileList = async (fileId) => {
    const params = {
        current: 1,
        size: 1000,
        ...(fileId !== undefined && { parentFileId: fileId }),
        ...(fileType.value && { fileType: fileType.value })
    }
    const res = await pageFileList(params);
    if (res.code == 200) {
        fileList.value = res.data.records;
    } else {
        ElMessage.error(res.message || '获取文件列表失败');
    }
};
// 点击资源（文件夹、文件）
const handleFileClick =async (item) => {
    if (item.fileType == 'folder') {
        currentFileId.value = item.fileId;
        getFileList(item.fileId);
        pathBreadcrumb.value.push(item);
    }else{ 
        const res = await previewFile(item.fileId);
        if (res.code == 200) {
            previewFileInfo.value = {
                fileUrl: res.msg,
                fileName: item.fileName,
                fileType: item.fileType
            }
            previewVisible.value = true;
        } else {
            ElMessage.error(res.message || '预览失败');
        }
    }
};

// 点击面包屑
const handleBreadcrumbClick = (folderId) => {
    currentFileId.value = folderId;
    getFileList(folderId);
    const index = pathBreadcrumb.value.findIndex(item => item.fileId == folderId);
    if (index !== -1) {
        pathBreadcrumb.value = pathBreadcrumb.value.slice(0, index + 1);
    } else {
        pathBreadcrumb.value = [];
    }
};

// ==================== 选择操作 ====================
// 全选变化
const handleCheckAllChange = (val) => {
    selectedFiles.value = val ? fileList.value : [];
    isIndeterminate.value = false;
};

// 选择变化
const handleCheckedChange = (value) => {
    let checkedCount = value.length;
    checkAll.value = checkedCount === fileList.value.length;
    isIndeterminate.value = checkedCount > 0 && checkedCount < fileList.value.length;
};

// 表格选择变化
const handleSelectionChange = (val) => {
    selectedFiles.value = val;
};

// ==================== 搜索操作 ====================
// 搜索建议
const searchSuggestions = (queryString, callback) => {
    if (queryString.trim() === '') {
        callback(searchHistory.value.map(item => ({ value: item })));
        return;
    }
    const results = searchHistory.value
        .filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
        .map(item => ({ value: item }));
    callback(results);
};

// 选择搜索建议
const handleSearchSelect = (item) => {
    searchKeyword.value = item.value;
    handleSearch();
};

// 执行搜索
const handleSearch = () => {
    if (!searchKeyword.value.trim()) return;

    if (!searchHistory.value.includes(searchKeyword.value.trim())) {
        searchHistory.value.unshift(searchKeyword.value.trim());
        if (searchHistory.value.length > 10) {
            searchHistory.value = searchHistory.value.slice(0, 10);
        }
        localStorage.setItem('fileSearchHistory', JSON.stringify(searchHistory.value));
    }

    const filteredResults = fileList.value.filter(item =>
        item.fileName.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );

    if (filteredResults.length > 0) {
        ElMessage.success(`找到${filteredResults.length}个匹配文件`);
    } else {
        ElMessage.info('没有找到匹配的文件');
    }
};

// ==================== 上传操作 ====================
// 上传文件
const handleUploadFile = async (options) => {
    console.log(options);
    const file = options.file;
    const formData = new FormData();
    formData.append('file', file);
    formData.append('parentId', currentFileId.value);
    const res = await uploadFile(formData);
    if (res.code == 200) {
        ElMessage.success(`成功上传${file.length}个文件`);
        getFileList(currentFileId.value);
    } else {
        ElMessage.error(res.message || '文件上传失败');
    }

};

// ==================== 创建文件夹 ====================
// 创建文件夹
const handleCreateFolder = () => {
    isCreatingNewFolder.value = true;
    newFolderName.value = '新建文件夹';
    nextTick(() => {
        const inputEl = document.querySelector('.files-grid-item-create .el-input__inner');
        if (inputEl) {
            inputEl.focus();
        }
    });
};

// 保存新文件夹
const saveNewFolder = async () => {
    if (!newFolderName.value.trim()) {
        isCreatingNewFolder.value = false;
        return;
    }
    const params = {
        folderName: newFolderName.value.trim(),
        parentId: currentFileId.value
    }
    const res = await createFolder(params);
    if (res.code == 200) {
        ElMessage.success('文件夹创建成功');
        await getFileList(currentFileId.value);
    } else {
        ElMessage.error(res.message || '文件夹创建失败');
    }
    isCreatingNewFolder.value = false;
    newFolderName.value = '';
};

// 取消创建文件夹
const cancelNewFolder = () => {
    isCreatingNewFolder.value = false;
    newFolderName.value = '';
};

// ==================== 移动操作 ====================
// 处理移动
const handleMove = (row) => {
    if (row) {
        movingItems.value = [row];
    } else if (selectedFiles.value.length > 0) {
        movingItems.value = [...selectedFiles.value];
    } else {
        ElMessage.warning('请先选择要移动的文件');
        return;
    }
    moveDialogVisible.value = true;
    closeContextMenu();
};

// 确认移动文件
const handleMoveFile =  () => {
    getFileList(currentFileId.value);
    moveDialogVisible.value = false;
    movingItems.value = [];
};
// ==================== 下载操作 ====================
// 处理下载
const handleDownload = async (row) => {
    let fileId = '';
    if (row) {
        console.log(1111111);
        fileId = row.fileId;
    } else if (selectedFiles.value.length > 0) {
        // movingItems.value = [...selectedFiles.value];
    } else {
        ElMessage.warning('请先选择要下载的文件');
        return;
    }
    const res = await downloadFile(fileId);
    if (res.code == 200) {
        const downloadUrl = res.msg;
        const a = document.createElement('a');
        a.href = downloadUrl;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        ElMessage.success('下载成功');
    } else {
        ElMessage.error(res.message || '下载失败');
    }
};

// ==================== 重命名操作 ====================
// 处理重命名
const handleRename = (item) => {
    editingFileId.value = item.fileId;
    editingFileName.value = item.fileName;
    nextTick(() => {
        const inputEl = document.querySelector('.files-grid-item .el-input__inner');
        if (inputEl) {
            inputEl.focus();
        }
    });
};

// 保存重命名
const handleRenameFile = async (item) => {
    if (!editingFileName.value || !editingFileName.value.trim()) {
        editingFileId.value = null;
        editingFileName.value = '';
        return;
    }
    const newName = editingFileName.value.trim();
    if (newName !== item.fileName) {
        const res = await renameFile({
            fileId: item.fileId,
            fileName: newName
        });
        if (res.code == 200) {
            ElMessage.success('重命名成功');
            getFileList(currentFileId.value);
        } else {
            ElMessage.error(res.message || '重命名失败');
        }
    }
    editingFileId.value = null;
    editingFileName.value = '';

};

// 取消重命名
const cancleRenameFile = () => {
    editingFileId.value = null;
    editingFileName.value = '';
};
// ==================== 详细信息操作 ====================
const handleDetail = (item) => {
    detailFileInfo.value = item;
    detailVisible.value = true;
};

// ==================== 删除操作 ====================
// 删除文件
const handleDelete = async (item) => {
    let fileId = '';
    if (item) {
        fileId = item.fileId;
    } else if (selectedFiles.value.length > 0) {
        fileId = selectedFiles.value[0].fileId;
    } else {
        ElMessage.warning('请先选择要删除的文件');
        return;
    }
    ElMessageBox.confirm('确认删除该文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        const res = await deleteFile(fileId);
        if (res.code == 200) {            
            ElMessage.success('删除成功');
            selectedFiles.value = [];
            getFileList(currentFileId.value);
        } else {
            ElMessage.error(res.msg || '删除失败');
        }
    }).catch(() => {
        ElMessage.info('已取消删除');
        // 用户点击取消，无需处理
    });
};
// ==================== 右键菜单操作 ====================
// 显示右键菜单
const showContextMenu = (event, item) => {
    event.preventDefault();
    showMenu.value = true;
    contextMenuItem.value = item;
    menuPosition.value = {
        left: event.clientX + 'px',
        top: event.clientY + 'px'
    };
    document.addEventListener('click', closeContextMenu);
};

// 关闭右键菜单
const closeContextMenu = () => {
    showMenu.value = false;
    document.removeEventListener('click', closeContextMenu);
};

// ==================== 视图操作 ====================
// 切换视图模式
const switchView = (mode) => {
    viewMode.value = mode;
};



</script>

<style lang="scss" scoped>
.netdisk-files {
    height: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    /* 第一行：按钮组 */
    .files-buttons-row {
        margin-bottom: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .files-button-group {
            display: flex;
            align-items: center;
            gap: 8px;

            .files-button-item {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 5px 12px;
                border-radius: 4px;
                background-color: #4775F519;
                cursor: pointer;
                height: 32px;

                img {
                    margin-right: 8px;
                }

                span {
                    font-size: 14px;
                    color: #4775F5;
                }
            }

            .files-button-create {
                background-color: #4775F5;

                span {
                    color: #FFFFFF;
                }
            }
        }

        .files-search-container {
            width: 300px;
            .files-search-input {
                width: 100%;
            }

            :deep(.el-input__wrapper) {
                border-radius: 20px;
            }

            :deep(.el-input__prefix) {
                margin-right: 8px;
                color: #999;
            }

            .search-suggest-item {
                display: flex;
                align-items: center;
                padding: 5px 0;
                .el-icon {
                    color: #999;
                    margin-right: 8px;
                }
            }
        }
        @media screen and (max-width: 768px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 18px;
        }
    }

    /* 第二行：导航和视图切换 */
    .files-nav-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;

        .files-breadcrumb-container {
            display: flex;
            align-items: center;
            .breadcrumb-icon{
                margin-right: 6px;
            }

            :deep(.el-breadcrumb) {
                font-size: 16px;

                .el-breadcrumb__item {
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    .el-icon {
                        margin-right: 4px;
                        font-size: 16px;
                    }

                    .el-breadcrumb__inner {
                        display: flex;
                        align-items: center;
                        color: #666;
                        font-weight: 400;

                        span {
                            margin-left: 4px;
                        }

                        &.is-link {
                            color: #333;
                            font-weight: 600;

                            &:hover {
                                color: #4775F5;
                            }
                        }
                    }

                    &:last-child {
                        .el-breadcrumb__inner {
                            color: #4775F5;
                            font-weight: 600;
                        }
                    }
                }
            }
        }

        .files-view-controls {
            display: flex;
            align-items: center;
            gap: 16px;

            .selected-count {
                color: #666;
                font-size: 14px;
                margin-right: 6px;

                span {
                    color: #4775F5;
                    margin: 0 3px;
                }
            }

            .files-view-switch {
                display: flex;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                overflow: hidden;

                .files-grid-view,
                .files-list-view {
                    width: 32px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    color: #606266;

                    &.active {
                        background-color: #4775F5;
                        color: white;
                    }

                    &:hover:not(.active) {
                        background-color: #f5f7fa;
                    }
                }
            }
        }

        @media screen and (max-width: 768px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 18px;
        }
    }

    /* 第三行：全选按钮 */
    .files-check-row {
        margin-bottom: 20px;

        .files-check-box {
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }

    .files-content {
        flex: 1; 
        overflow-y: auto;
        position: relative;
        .files-content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
            .files-grid-item {
                background-color: #fff;
                border-radius: 8px;
                padding: 16px;
                cursor: pointer;
                transition: all 0.3s;
                position: relative;
                .item-checkbox {
                    opacity: 0;
                    position: absolute;
                    top: 8px;
                    z-index: 2;
                    @media screen and (max-width: 768px) {
                        opacity: 1;
                    }
                }
                &.files-grid-item-create {
                    background: rgba(71, 117, 245, 0.08);
                }
                &.checked {
                    background: rgba(71, 117, 245, 0.08);
                    .item-checkbox {
                        opacity: 1;
                    }
                }
                .item-cover {
                    width: 100%;
                    height: 126px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    margin-bottom: 16px;

                    .item-cover-img {
                        width: 96px;
                        height: 96px;
                        object-fit: contain;
                    }
                }
                .item-info {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 24px;

                    :deep(.el-input__inner) {
                        text-align: center;
                    }

                    span {
                        font-size: 14px;
                        line-height: 20px;
                        color: rgba(0, 0, 0, 0.85);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 100%;
                        text-align: center;
                    }
                }
                @media (hover: hover) and (pointer: fine) {
                    &:hover {
                        background: rgba(71, 117, 245, 0.08);
                        .item-checkbox {
                            opacity: 1;
                        }
                    }
                }
            }
            @media screen and (max-width: 768px) {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
        } 

        .files-content-table {
            width: 100%;

            // 列表视图的样式
            .files-action-btns {
                display: flex;
                align-items: center;
                gap: 24px;

                span {
                    cursor: pointer;
                }
            }
        }

        .files-context-menu {
            position: fixed;
            z-index: 1000;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            width: 120px;

            .files-menu-item {
                display: flex;
                flex-direction: column;
                padding: 8px 16px;
                cursor: pointer;
                font-size: 14px;

                &:hover {
                    background-color: #f5f7fa;
                    color: #4775F5;
                }
            }
        }
    }

}

:deep(.el-dialog__body) {
    padding: 20px;
}

:deep(.el-dropdown-menu) {
    .el-dropdown-menu__item {
        display: flex;
        align-items: center;

        i {
            margin-right: 5px;
        }

        &:hover {
            color: #4775F5;
            background-color: #F5F7FA;
        }

        &.selected {
            color: #4775F5;
            font-weight: bold;
        }
    }
}
</style>